<template>
    <div>
        <div class="header">
            <transition :name="transitionName">
            <router-view class="router"></router-view>
        </transition> 
        </div>
            <cube-tab-bar v-model="selectedLabelDefault" :data="tabs" @click="clickHandler" @change="changeHandler" class="bot-nav">
            </cube-tab-bar>
    </div>
</template>


<script>
export default {
    data() {
        return {
            selectedLabelDefault: '首页',
            tabs: [{
                label: '首页',
                icon: 'cubeic-home'
            }, {
                label: '分类',
                icon: 'cubeic-like'
            }, {
                label: '搜索',
                icon: 'cubeic-vip'
            }, {
                label: '购物车',
                icon: 'cubeic-person'
            }, {
                label: '我的',
                icon: 'cubeic-person'
            }],
            transitionName: "slide-right"
        }
    },
    methods: {
        clickHandler(label) {
            // if you clicked home tab, then print 'Home'
            console.log(label)
        },
        changeHandler(label) {
            switch (label) {
                case '首页':
                    this.$router.push('/botNav/home')
                    break
                case '分类':
                    this.$router.push('/botNav/category')
                    break
                case '搜索':
                    this.$router.push('/botNav/search')
                    break
                case '购物车':
                    this.$router.push('/botNav/cart')
                    break
                case '我的':
                    this.$router.push('/botNav/user')
                    break
            }
        }
    }
}
</script>


<style lang="stylus">
    .cube-tab-bar.bot-nav
        position fixed
        bottom: 0   
        left: 0
        width: 100%
        z-index: 1000
        background-color #fff
        .cube-tab div 
            font-size: 16px
            padding-top: 3px

    .header
        position absolute
        top 0px
        bottom 0px
        width 100%
        overflow hidden

    .router
        position absolute
        width 100% 
        transition all 0.8s ease
    .slide-left-enter, .slide-right-leave-active
        opacity 0
        --webkit-transform translate(100%, 0)
        transform   translate(100%, 0)
    .slide-right-enter, .slide-left-leave-active
        opacity 0
        --webkit-transform translate(-100%, 0)
        transform   translate(-100%, 0)
        


</style>